<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>专题网站</title>

    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

    <link rel="stylesheet" type="text/css"  href="../css/bootstrap.min.css">

    <!--    bootstrap.js依赖于jquery.js-->
    <script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>





    <!--    查看container-->
    <style type="text/css">
        /*不同的浏览器展示不同，所以要先清除内外边距*/
        *{
            margin: 0;
            padding: 0;
        }



        /*.container{*/
        /*    background-color: gold;*/
        /*    border:1px solid #000;*/
        /*    height: 50px;*/
        /*}*/

        /*!*查看栅格 以col-开头*!*/
        /*div[class*="col-"]{*/
        /*    background-color: #2aabd2;*/
        /*    border: 1px solid #000;*/
        /*}*/
        body {
            color: #3c3c3c;  /*一般网页不用纯黑字体 用淡黑#3c3c3c */
            font-size: 16px;
            font-family: "\5FAE\8F6F\96C5\9ED1","\5b8b\4f53";
        }
        h1 {
            text-align: center;
            font-size: 25px;
            font-weight: normal;
        }
        .sub-title {
            text-align: center;
            font-size: 12px;
        }
        .sport {

        }
        .collect {
            font-weight: bolder;
            color: #ccc;
        }
        .collect:hover {
            color: #f00;
        }
        p {
            font-size: 14px;
            line-height: 22px;
            text-indent: 2em;
            letter-spacing: 1px;
        }
        em {
            font-style: normal;
            color: skyblue;
        }

        .title {
            /*color:#999;*/

            /*font-size:40px;*/
            /*font-weight: normal;*/
            /*font-style: normal;*/
            /*font-family: "\5FAE\8F6F\96C5\9ED1","\5b8b\4f53";*/

            /*text-align:center;*/
            /*text-shadow:2px 2px 2px #333;*/

            /*margin-bottom: 20px;*/
            /*padding-top: 40px;*/

        }

        /*p{*/
        /*    font-family: "\5FAE\8F6F\96C5\9ED1","\5b8b\4f53";*/
        /*    font-size: 18px;*/

        /*    text-indent: 2em;*/

        /*    line-height: 26px;*/
        /*    !*letter-spacing: 15px; 字间距*!*/
        /*    !*word-spacing: 10px;  单词间距，中文无效*!*/
        /*    color: rgba(0,0,0,0.6); !*最后一个是半透明，0-1之间取值 css3属性*!*/
        /*    text-shadow:2px 2px 2px rgba(0,0,0,0.6); !*  水平位置（必填） 垂直位置（必填） 模糊距离 阴影颜色      文字阴影    css3属性*!*/
        /*}*/

        /*a.块元素：*/
        /* 1.从头开始，独占一行*/
        /* 2.高度、行高、外边距、内边距都可设置*/
        /* 3.宽度默认100%*/
        /* 4.可以容纳其他元素*/
        /* 5.块元素转行内元素： display:inline */

        /*b.行内元素：*/
        /* 1.和相邻行内元素是一行*/
        /* 2.宽、高无效，但水平方向的padding和margin可以设置，垂直方向无效*/
        /* 3.默认宽度是本身内部的宽度*/
        /* 3.只能容纳文本或其他行内元素*/
        /* 5.行内元素转块元素： display:block */
        /* 5.行内元素转行内块元素： display:inline-block */

        /*注意：*/
        /*   1.p、h1、dt等，里面不能放块元素，他们是文字类块元素*/
        /*   2.，a特殊（a里面不能再放a）*/

        /*c.行内块元素 inline-block*/
        /* 1. img input td 可以设置宽高和对齐*/
        /* 2. 和相邻行内元素（行内块）在一行，但是之间会有空白*/
        /* 3. 默认宽度是本身内容宽度*/
        /* 4. 高度、行高、内外边距可以控制*/


        /*选择器：*/
        /* 1.通配符选择 **/
        /* 2.类选择器 .*/
        /* 3.伪类选择器 :    链接伪类选择器  结构伪类选择器  目标伪类选择器*/
        /* 4.交集选择器 p.name*/
        /* 5.并集选择器 h1,h2,body*/
        /* 6.后代选择器 p a*/
        /* 7.子元素选择器 p > a*/
        /* 8.属性选择器  p[class^=aaa]*/
        /* 9.伪元素选择器 ::    p::first-letter  p::selection  div::before{content: "dddd"} 在div盒子“内部”前面插入文字*/


        /*background-color*/
        /*background-image:url(img/a.png);*/
        /*background-repeat: no-repeat; repeat-x repeat-y*/
        /*background-positon: left top;   默认左上角  没有顺序 center bottom*/
        /*background-positon: left; 如果只写一个 另一个默认center*/
        /*background-positon: 10px 10px; 第一个是x左边 第二个是y*/
        /*background-positon: 10px center;*/
        /*background-attachment: scroll; 默认背景图随着滚动条滚动，fixed背景固定 */
        /*background: 颜色 图片 平铺 滚动 位置；  简写*/
        /*background-size: 10px 50px; 水平尺寸 垂直尺寸； 修改背景图大小；建议只是用一个值，防止图片扭曲，100px或80%；可以使用cover（常用）等比例缩放占满盒子，可能会隐藏一部分图片了；contain:等比缩放，保证最大比例缩放，盒子可能占不满*/
        body{
            background-color: white;
            /*background-image: url(../img/moshoushijie.jpg);*/
            background-position: center 20px;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: 80%;
        }
        /*半透明背景*/
        .bg{
            height: 100px;
            background: rgba(0,0,0,0.5);

        }
        /*使用多个背景图 逗号隔开;图片存在交集时，前面的会覆盖后面的；为了避免背景色将图片遮住，颜色放在最后一个图片*/
        .aa{
             background: url(../img/1.jpg) no-repeat scroll center top,
                         url(../img/2.jpg) no-repeat scroll center top,
                         url(../img/3.jpg) no-repeat scroll center top,
                         url(../img/4.jpg) no-repeat scroll center top black;
        }

        /*文字效果*/
        .font-1{
            height: 300px;
            width: 300px;
            background-color: #7a7a7a;
        }
        .upFont{
            color: #7a7a7a;
            text-shadow: 1px 1px 1px #fff, -1px -1px 1px #000 ;
            font-size: 50px;
        }
        .downFont{
            color: #7a7a7a;
            text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff ;
            font-size: 50px;

        }

        /*修改连接的装饰效果*/
        /*text-decoration: overline; 默认下划线 none underline line-through ;*/

        /*取消列表自带的小点或编号
              ul{
                 list-style:none;
              }
        */

        /*练习*/
        .test-1{
          height: 50px;
          background-color: black;
        }
        .test-1 > a{
            /*background-color: #fcf8e3;*/
            display: inline-block;
            width: 50px;
            height: 30px;
            text-align: center;
            line-height: 30px; /* 技巧：行高等于盒子高度 就可以垂直居中*/
            font-size: 20px;
            color: #aaa;
            text-decoration: none; /*去掉连接下划线*/
        }
        .test-1 > a:hover{
            background-color: red;
            /*也可以添加背景图片 backgroud: url() no-repeat;*/
        }


        /*css的特性
        层叠性
        继承性（不是所有的都继承，text- font- line-等会继承，height不会继承）
        优先级  不同的选择器权重 公式：0,0,0,0； 元素选择器：0,0,0,1 < 类、伪类选择器：0，0,1,0 <  id选择器：0,1,0,0  < 行内样式：1,0,0,0  < 样式后添加，不是选择器，最大的 !important

        权重叠加  li{}  <  ol li{} < nav ol li{}
                 0001       0002      0003

        权重相同：就近
        继承的属性：权重为0
        */

        /*盒模型*/
        /*圆角： border-radius: 1px 1px 1px 1px;  左上 右上 右下 左下*/
        /*       border-radius：50%(圆形)    border-radius：5px; 一个值是四个角*/
        /*       border-radius：5px 6px;  左上右下:5px  右上左下6px*/


        input{
            border-width: 0;      /*去掉input默认边框*/
        }
        .input-box{
            width: 50px;
            height: 30px;
            background-color: #fcf8e3;
            border-top-style: solid; /*默认为none,无边框，这时其他的边框属性不生效；dashed:虚线 dotted:点线 double:双线*/
            border-top-width: 2px;
            border-top-color: red;

            /*border-bottom-color: ;*/
            /*border: 1px solid #7a7a7a;*/
        }
        .table-box{
            width: 200px;
            height: 200px;
            border: 1px solid #c82829;
            border-collapse: collapse; /*合并相邻边框*/
        }
        .table-box td{
            border: 1px solid #c82829;
        }

        /*块元素居中   margin: 2px auto  只有快元素才可以*/

        /*同级块元素的上下外边距合并问题：只给一个块元素margin-bottom或给另一个块元素margin-top*/
        /*嵌套块元素上下外边距合并（塌陷）问题：
                     1.给父元素添加 border:1px solid red;
                     2.给父元素添加padding
                     3.给父元素添加溢出隐藏（BFC）：overflow:hidden
        */

        /*计算盒子大小： width + padding + border + margin
                  所以添加padding-left会影响块的大小
                  如果盒子没有width属性(也不能有width:100%) 则不影响宽度；否则会有影响，可能会显示滚动条
        */

        /*box-sizing:content-box;  这是以前的盒模型（默认） w3c定义；添加padding、border、margin都会撑大面积*/
        /*box-sizing:border-box;   这是新的盒模型，css3,添加padding、border不会撑大面积，但是添加margin会撑大*/

        /* 101 盒子阴影 box-shadow: 水平位置（必填） 垂直位置（必填） 模糊距离 影子大小 阴影颜色 内、外阴影；
          box-shadow: 2px 2px 1px 3px rgba(0,0,0,0.5) inside;
          添加多个 box-shadow: 2px 2px， -2px -2px， 5px 5px
        */

    </style>
</head>


<body>
    <div class="container">

        <h1>如何快速搭建自己的网站</h1>
        <div class="sub-title">2020年5月28日20:12:34
            <span class="sport">新浪体育</span>
            <a href="#">评论数(34555) 阅读数(55555)</a>
            <a href="#" class="collect">收藏本文</a>
        </div>
        <hr/>
        <!--        大屏幕显示一行，其他屏幕显示三行-->
        <div class="row">
            <div class="col-lg-2"></div>
            <div class="col-lg-8">
                <p>自媒体快速发展的时代，很多人都有搭建自己网站的想法，这里我就教大家一种简单的搭建方法。

                    搭建自己的网站，可以使用网上的免费资源，当然免费的资源需要你花时间去找，而且有些资源不是很稳定。

                    本教程是基于阿里云的教程，我是花钱买了阿里云的轻量级的服务器和域名，然后就可以搭建自己的网站了。

                    使用的软件是宝塔和Wordpress。</p>

                <p><a href="http://wuxiaolong.tech">本人搭建的网站</a></p>

                <p><a href="https://www.bilibili.com/video/av87415049?from=search&seid=3044946299058432244">本教程视频地址</a></p>

                <h2>一、准备工作</h2>
                <h3>1、服务器（必须）</h3>
                <p>在阿里云上买了<em>阿里云</em>的轻量级服务器。大家也可以使用其他的商业云。如果有自己的公网服务器，也可以。</p>

                <p>在<em>阿里云</em>上买相关的服务器和域名需要先注册阿里云的账号，登陆账号后，进入控制台，就可以看到自己买的产品了；如果没有开通任何产品，需要现在<em>阿里云</em>买轻量应用服务器；我买的<em>阿里云</em>的产品比较多，所以显示的比较多。</p>


                <p>下面就是我买的轻量应用服务器，一年609元，相关的配置如下：</p>


                如果您也要买，建议根据自己的情况买相关的配置就好了，需要注意的是，需要选系统镜像-centos7.3，因为后面需要安装宝塔面板要求cengtos7以上；下面是购买的地址：https://s.click.taobao.com/t?e=m%3D2%26s%3Dz8qUe8TihXkcQipKwQzePCperVdZeJviEViQ0P1Vf2kguMN8XjClArIlDWo1DJxUu3L3uoV091piWqKDbmFKuxFi2SvN%2FDeNPEcaNzNMDiGaZwMDXF7hkJSlbT3pBXPWYMsSHLWchUVtQl8vLdysepHjKlMEkHC06du04PdR3Oc9XUfbPSJC%2F02QpUwcKVbRX7%2BliFBjeJfQWJeWE%2FFfPg%3D%3D


            </div>
            <div class="col-lg-2"></div>
        </div>

        <div class="bg"></div>

        <div class="font-1">
            <div class="upFont">凸起文字</div>
            <div class="downFont">凹陷文字</div>
        </div>

        <div class="test-1">
            <a href="#">公司</a>
            <a href="#">业务</a>
            <a href="#">合作</a>
            <a href="#">联系</a>
        </div>


        <div class="box-1" cellspacing="0" cellpadding="0">
            名称：<input type="text" class="input-box"/>

            <table class="table-box">
                <tr>
                    <td>1234</td>
                    <td>1234</td>
                    <td>1234</td>
                    <td>1234</td>
                </tr>
                <tr>
                    <td>1234</td>
                    <td>1234</td>
                    <td>1234</td>
                    <td>1234</td>
                </tr>
                <tr>
                    <td>1234</td>
                    <td>1234</td>
                    <td>1234</td>
                    <td>1234</td>
                </tr>
            </table>
        </div>

    </div>
</body>

</html>
